<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
   <comment :is="type" :content="getContent"> </comment>
   <button @click="btnClick">切换</button>

</div>
<script>

    const  MyComponent={
        data:function () {
            return {
                selfContent:this.content
            }
        },
        props:[
            'content'
        ],
        template:`
            <div>
                <div @click="handleClick" >{{selfContent}}</div>
            </div>
        `,
    }

    const MyCounter={
        data:function () {
            return {
                counter:0
            }
        },
        //定义属性
        props:[
            'content'
        ],
        template:`
        <div>{{content}}: {{counter}}
            <button @click="addOpt">+</button>
            <button @click="subOpt">-</button>

        </div>
        `,
        methods:{
            addOpt:function (  ) {
                this.counter++
            },
            subOpt:function () {
                this.counter--
            }
        }


    }
    const  vm = new Vue(
        {
            el:"#app",
            data:{
                message:'Hello Vue!',
                type:'cpn-a'
            },
            components:{
                'cpn-a':MyComponent,
                'cpn-b':MyCounter
            },
            computed:{
                getContent:function () {
                    if(this.type=='cpn-a'){
                        return '我是A组件'
                    }else{
                        return '我是B组件'
                    }
                }
            },
            methods:{
                btnClick:function () {
                    this.type= this.type=='cpn-a'?'cpn-b':'cpn-a'
                }
            }

        }
    )

</script>


</body>
</html>